<template>
	<view class="details">
		<z-swiper :autoplay='autoplay' :list='banner' :effect3d='effect3d' :fullScreen='fullScreen'
			:effect3dMargin='`${effect3dMargin}rpx`' :vertical='vertical' :topFloat='topFloat'
			:fotterFloat='fotterFloat' :mode='mode' :indicatorPos='indicatorPos' :video_img="res_picker.video_img">
		</z-swiper>
		<view class="title_box">
			<view class="text_box">
				<view class="text">
					{{res_picker.title}}
				</view>
				<view class="fenxiang">
					<image src="@/static/img/fenxaing.png" mode=""></image>
				</view>
			</view>
			<view class="one_box">
				<text class="price" v-if="res_picker.gift !== '15'">￥{{res_picker.marketprice}}</text>
				<text class="price" v-else>消耗贡献积分{{res_picker.marketprice}}</text>
				<text class="popup_box_top_price_lsjf">
					赠送绿色积分：{{res_picker.lsjf?res_picker.lsjf:'0.00'}}
				</text>
			</view>
		</view>
		<view class="content_box">
			<view class="item">
				快递: &nbsp;包邮
			</view>
			<view class="item">
				销量: &nbsp;{{res_picker.sales}}
			</view>
			<view class="item">
				库存: &nbsp;{{res_picker.total}}
			</view>
		</view>
		<!-- <view class="content_box">
			<view class="item">
				赠送能耗:&nbsp;{{res_picker.nh}}
			</view>

			<view class="item">
				赠送额度:&nbsp;{{res_picker.ed}}
			</view>
		</view> -->
		<view class="heng"></view>
		<view class="details_box">
			<view class="details_title">
				—————— 商品详情 ——————
			</view>
			<view class="heng"></view>
			<rich-text :nodes="res_picker.content"></rich-text>
		</view>


		<view class="details_button">

			<view class="item">
				<image src="/static/home/shouye.png" mode=""></image>
				<view class="">
					首页
				</view>
			</view>
			<view class="item">
				<image src="/static/home/kefu.png" mode=""></image>
				<view class="">
					客服
				</view>
			</view>
			<view class="item">
				<image src="/static/home/gouwuche.png" mode=""></image>
				<view class="">
					购物车
				</view>
			</view>
			<view class="text">
				加入购物车
			</view>
			<view class="text" style="background-color: #E01212;" @click="openGoods('bottom')"
				v-if="res_picker.gift !== '15'">
				立即购买
			</view>
			<view v-else class="text" style="background-color: #E01212;" @click="openGoods('bottom')">
				立即兑换
			</view>
		</view>
		<uni-popup ref="popup" @change='popupChange($event)'>
			<view class="popup_box">
				<view class="popup_box_top">
					<view class="popup_box_top_img">
						<image :src="res_picker.thumb" class="popup_box_top_img_" mode=""></image>
					</view>
					<view class="popup_box_top_close" @click="closeGoods()">
						<image src="/static/home/close.png" mode=""></image>
					</view>
					<view class="popup_box_top_price" v-if="res_picker.gift !== '15'">
						￥{{res_picker.marketprice}}
					</view>
					<view class="popup_box_top_price" v-else>
						消耗贡献积分{{res_picker.marketprice}}
					</view>
				</view>
				<view class="popup_box_center">
					<view class="popup_box_center_num">
						<view class="popup_box_center_num_text">
							数量：
						</view>
						<view class="popup_box_center_num_" v-if="res_detail !== ''">
							<uni-number-box v-model="num" :max="res_detail.goods.maxbuy * 1"
								:min="res_detail.goods.minbuy * 1" @change="changeValue" />
						</view>
					</view>
				</view>
				<view class="popup_box_bottom">
					<button class="popup_box_bottom_an" @click="gotoconfirm_an_orderFun()">确定</button>
				</view>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	import {
		goods_detail,
		goods_picker
	} from '@/api/home.js'
	import zSwiper from '@/components/z-swiper/index.vue'

	export default {
		components: {
			zSwiper
		},
		data() {
			return {
				openid: '',
				id: '',
				res_picker: '',
				res_detail: '',
				buy: false,
				num: 1,
				min: 1,
				max: 1,




				effect3d: true,
				autoplay: false,
				vertical: false,
				fullScreen: true,
				effect3dMargin: 40,
				topFloat: true,
				fotterFloat: true,
				mode: 'round',
				indicatorPos: 'bottomCenter',
				banner: [],
			}
		},
		onLoad(e) {
			this.id = e.id;
			uni.getStorage({
				key: 'openid',
				success: (res) => {
					this.openid = res.data;
					this.pickerFun();
				},
				fail: () => {
					uni.navigateTo({
						url: '/pages/login/login'
					});
				}
			});
		},
		methods: {
			set_banner(list, video = '') {
				console.log(list, video);
				var banner_list = []
				if (video == '') {
					for (var i = 0; i < list.length; i++) {
						var obj = {
							id: i,
							src: list[i],
							type: 'image',
						}
						banner_list.push(obj)
					}
				} else {
					banner_list.push({
						id: 0,
						src: video,
						type: 'video',
						poster: this.res_picker.video_img
					})
					for (var i = 0; i < list.length; i++) {
						var obj = {
							id: i + 1,
							src: list[i],
							type: 'image',
						}
						banner_list.push(obj)
					}
				}
				this.banner = banner_list
				console.log(this.banner);
			},
			gotoconfirm_an_orderFun() {
				uni.navigateTo({
					url: `/pages/home/confirmAnOrder/confirmAnOrder?id=${this.id}&optionid=0&total=${this.num}`
				})
				this.closeGoods();
			},
			backFun() {
				uni.navigateBack({
					delta: 1
				})
			},
			popupChange(e) {
				console.log(e);
			},
			changeValue(e) {
				console.log(e);
			},
			async pickerFun() {
				let up = {
					openid: this.openid,
					id: this.id
				}
				let data1 = await goods_detail(up);
				let data2 = await goods_picker(up);
				var content = data1.content;
				content = content.replace(/data-lazy/g, " src");
				content = content.replace(/style="/g, 'style=" width:100%;');
				this.res_picker = data1;
				this.set_banner(data1.thumbs, data1.video)
				this.res_picker.content = content;

				this.res_detail = data2.result;
			},
			openGoods(type) { // open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup.open(type)
			},
			closeGoods() {
				this.$refs.popup.close()
			}
		}
	}
</script>

<style lang="less">
	.popup {
		width: 100%;

	}

	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
		background-color: #fff;
	}

	.details_title_back {
		position: fixed;
		top: 30rpx;
		z-index: 12;
		left: 30rpx;
	}

	.popup_box {
		width: 100%;
		height: 218px;
		background-color: #fff;
		display: flex;
		flex-direction: column;

		.popup_box_top {
			width: 100%;
			height: 148rpx;
			position: relative;
			padding: 20rpx;
			padding-left: 220rpx;
			border-bottom: 1px solid #eee;
			box-sizing: border-box;

			.popup_box_top_close {
				width: 40rpx;
				height: 40rpx;
				position: absolute;
				right: 40rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.popup_box_top_price {
				font-size: 28rpx;
				color: rgb(164, 11, 11);
			}

			.popup_box_top_img {
				width: 180rpx;
				height: 180rpx;
				position: absolute;
				top: -50rpx;
				background-color: #fff;
				display: flex;
				justify-content: center;
				align-items: center;
				left: 20rpx;
				border: 2rpx solid #eee;
				border-radius: 2rpx;

				.popup_box_top_img_ {
					width: 170rpx;
					height: 170rpx;
				}
			}
		}

		.popup_box_center {
			width: 100%;
			height: 194rpx;
			box-sizing: border-box;

			.popup_box_center_num {
				display: flex;
				width: 100%;
				box-sizing: border-box;
				padding: 20rpx;
				height: 94rpx;
				justify-content: space-between;
				align-items: center;
				font-size: 28rpx;
			}

		}

		.popup_box_bottom {
			width: 100%;
			flex: 1;

			.popup_box_bottom_an {
				width: 100%;
				height: 100%;
				background-color: #ec2b63;
				color: #fff;
				border-radius: 0;
			}
		}
	}

	.details {
		width: 100%;
		max-height: 100vh;
		background-color: #F1F1F1;
		background-size: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		padding-bottom: 90rpx
	}

	.title_box {
		width: 100%;
		padding: 25rpx 30rpx;

		font-weight: 600;
		position: relative;
		background-color: #Fff;

		.text_box {
			display: flex;

			.text {
				width: 80%;
				overflow: hidden;
			}

			.fenxiang {
				image {
					width: 135rpx;
					height: 60rpx;
					position: relative;
					right: -40rpx;
					top: 20rpx
				}
			}

		}

		.one_box {
			padding: 20rpx 0 0 0;
			position: relative;

			.popup_box_top_price_lsjf {
				position: absolute;
				right: 20rpx;
				font-size: 24rpx;
				bottom: 0;
				color: #b8b8b8;
			}

			.price {
				font-size: 34rpx;
				font-weight: 700;
				color: #E01212;
			}
		}
	}

	.content_box {
		width: 100%;
		display: flex;
		justify-content: space-between;
		font-size: 26rpx;
		padding: 0 30rpx 20rpx;
		color: #b8b8b8;
		background-color: #Fff;
	}

	.heng {
		width: 100%;
		height: 20rpx;
		background-color: #F1F1F1;
	}

	.details_box {
		width: 100%;
		background-color: #Fff;

		.details_title {
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			color: #b8b8b8;
		}
	}


	.details_button {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		background-color: #fff;
		// padding: 20rpx 0;
		z-index: 99;
		display: flex;
		// justify-content: space-around;
		height: 90rpx;
		font-size: 26rpx;

		.item {
			width: 16.5%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-size: 22rpx;

			image {
				width: 36rpx;
				height: 32rpx;
			}

			padding: 22rpx 0 11rpx;
		}

		.text {
			width: 25.25%;
			line-height: 90rpx;
			text-align: center;
			color: #fff;
			background-color: #FF9B19;

		}
	}
</style>